<template>
  <div>
    <Tree :list="treeData" />
    <h1>关于我们</h1>
    <input type="file" @change="fileChange" />
    <Button type="primary" @click="addCounter">全局数量加1</Button>
    <Button type="primary" @click="reduceCounter">全局数量减1</Button>
    <Input disabled :value="indexStore.counter" />
    <Button type="primary" @click="tohome">去首页</Button>
    <Radio>Radio</Radio>
    <span>关于我们</span>
    <span>关于我们</span>
    <div class="test" v-showmore>
      <span class="text">显示更多的示例1</span>
    </div>
    <div class="test" v-showmore="!(indexStore.counter > 3)">
      <span class="text">显示更多的示例2</span>
    </div>
  </div>
</template>
<script lang="ts">
import { Button, Input, Radio } from "ant-design-vue";
import { defineComponent, ref } from "vue";
import { IndexStore } from "@/stores/main";
import router from "@/route";
import treeData from "@/components/tree/data"
import Tree from "@/components/tree/Tree.vue";
export default defineComponent({
  components: { Button, Input, Radio, Tree },
  setup() {
    const isHide = ref(true);
    const indexStore = IndexStore();
    const addCounter = () => {
      indexStore.$patch({ counter: indexStore.counter + 1 });
    };
    const reduceCounter = () => {
      indexStore.$patch({ counter: indexStore.counter - 1 });
    };

    const tohome = async () => {
      router.replace({
        path: "/home",
      });
    };
    function fileChange(e: any) {
      let reader = new FileReader();
      reader.readAsArrayBuffer(e.target.files[0]);
      console.log(reader);
      reader.onload=function(){
        console.log(this.result,ArrayBuffer);
        
      }
      
    }
      return {
        indexStore,
        addCounter,
        reduceCounter,
        tohome,
        isHide,
        treeData,
        fileChange,
      };
    },
  });
</script> 
<style lang="less" scoped>
.test {
  padding-top: 10px;
  font-size: 32px;
  width: 200px;
  line-height: 1.3;
}
</style>
